<template>
    <div class="loginbox">
        <div class="content">
            <h2>登录</h2>
            <el-form
                ref="ruleFormRef"
                :model="userInfo"
                status-icon
                :rules="rules"
                class="demo-ruleForm"
            >
                <el-form-item prop="admin_name">
                        <el-input
                        v-model="userInfo.admin_name"
                        class="w-50 m-2"
                        size="large"
                        placeholder="Username"
                        :prefix-icon="User"
                        />
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input
                    v-model="userInfo.pwd"
                    size="large"
                    placeholder="Password"
                    :prefix-icon="Lock"
                    show-password
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { User,Lock } from '@element-plus/icons-vue'
    import { ref,reactive } from "vue";
    import http from "../api/admin";
    import {useRouter} from 'vue-router'
    import {Trembling} from "../utils/debounce"
    import type { FormInstance, FormRules } from 'element-plus'
    import { ElMessage } from 'element-plus'
    const ruleFormRef = ref<FormInstance>()
    const router=useRouter();
    interface Iuser{
        admin_name:string,
        pwd:string
    }
    let userInfo=reactive<Iuser>({
            admin_name:"",
            pwd:""
    })
    const checkAdminName=(rule: any, value: any, callback: any)=>{
        if (!value) {
            return callback(new Error('请输入账号'))
        }else{
            callback() 
        }
    }
    const checkAge = (rule: any, value: any, callback: any) => {
        if (!value) {
            return callback(new Error('请输入密码'))
        }
        setTimeout(() => {
            if (value.length>18||value.length<6) {
            callback(new Error('密码必须6-12位'))
            } else {
                callback()
            }
        }, 1000)
}

const rules = reactive<FormRules>({
    pwd: [{ validator: checkAge, trigger: 'blur' }],
    admin_name:[{ validator: checkAdminName, trigger: 'blur' }]
})
    const getLogin=async ()=>{
        if (!ruleFormRef.value) return
        await ruleFormRef.value.validate(async(vaild:any,fields:any)=>{
            if(vaild){
                const res:any=await http.login(userInfo.admin_name,userInfo.pwd)
                if(res&&res.code===10000){
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    sessionStorage.setItem("token",res.data)
                    router.push("./home")
                }else{
                    ElMessage({
                        message: res.message,
                        type: 'error',
                    })
                }
            }
        })
       
    }
    const login = Trembling(getLogin, 100);
</script>

<style lang="less" scoped>
    .loginbox{
        height: 100%;
        background:url(../assets/image/back.jpg) no-repeat;
        background-size: cover;
        background-position: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        .content{
            text-align: center;
            width: 420px;
            height: 300px;
            h2{
                color: #fff;
                margin: 40px;
            }
            :deep(.el-input__wrapper){
                background-color:  rgb(40, 52, 67) !important;
                box-shadow:0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
                border-radius: 8px;
                margin-bottom: 22px;
                color: #fff;
            }
            .el-button{
                width: 100%;
                height: 40px;
            }
        }
    }
</style>